<template>
	<view class="main">
		<view class="login-main">
			<image src="../../static/q_registered_top.png" mode=""></image>
		</view>
		<view class="login-content">
			<view class="describe">
				{{ isShow ? '手机快捷登录' : '账号密码登录' }}
			</view>
			<!-- 切换登录方式 -->
			<view class="account" v-if="isShow">
				<view class="section">
					<u-cell-group>
						<u-field v-model="phoneNum" :clearable="false" placeholder="请填写手机号" icon="phone" type="text" label-width="150">
						</u-field>
						<u-field v-model="yzm" placeholder="请填写验证码" icon="hourglass-half-fill" label-width="60">
						</u-field>
					</u-cell-group>
					<text @click="show=true" class="identClass">{{phoneNumPrefix[identifierPrefix].tel}}</text>
					<text class="btns" type="default" @tap="getCode" :class="{ isColor: disable != true }">{{ count }}{{ btnMsg }}</text>
				</view>
			</view>
			<view class="account" v-if="!isShow">
				<view class="section">
					<u-cell-group>
						<u-field v-model="phoneNum" placeholder="请输入账号" icon="man-add" type="text" label-width="60">
						</u-field>
						<u-field v-model="passwo" type="password" password placeholder="请填写密码" icon="lock" label-width="60">
						</u-field>
					</u-cell-group>
				</view>
			</view>
			<!-- 登录方式 -->
			<view class="chang">
				<button @click="login">登录</button>
				<view class="box">
					<view class="box-one" v-if="isShow"><text class="one" @tap="loginChange">账号密码登录</text></view>
					<view class="box-two" v-if="!isShow">
						<text class="two" @tap="loginChange">手机快捷登录</text>
						<text class="line">|</text>
						<text class="two" @tap="jump('')">忘记密码</text>
					</view>
				</view>
			</view>
			<u-picker v-model="show" mode="selector" :default-selector="identifierPrefix" :range="phoneNumPrefix" range-key="name"
			 @confirm="confirm"></u-picker>
			<!-- 第三方登录方式，请换成每个平台自身的appid -->
			<u-divider color="#6d6d6d" half-width="300" border-color="#6d6d6d">OR</u-divider>
			<view class="menu">
				<!-- 	<u-icon @click="auth()" name="email" class="email" color="#fff" size="50"></u-icon> -->
				<u-icon name="weixin-circle-fill" color="#68d45c" @click="auth('weixin')" size="85"></u-icon>
				<u-icon name="qq-circle-fill" color="#ffba2d" @click="auth('qq')" size="85"></u-icon>
				<u-icon name="weibo-circle-fill" color="#f65541" @click="auth('sinaweibo')" size="85"></u-icon>
				<u-icon name="facebook-circle-fill" color="#46c4f4" size="85"></u-icon>
				<u-icon name="twitter-circle-fill" color="#3bc8fe" size="85"></u-icon>
			</view>

		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { setToken,getToken } from '@/util/tokeCookien.js'
	export default { /* 测试账号 2418562298@qq.com  Xx1871339825 */
		data() {
			return {
				uuid: '', //设备号
				identifierPrefix: [0], //手机号前缀
				show: false, //前缀开关
				phoneNum: '', //手机号
				yzm: '', //验证码
				passwo: '', //密码
				btnMsg: '',//验证码倒计时
				statusBarHeight: 0,//手机状态栏高度
				isShow: true,
				disable: true,
				count: '获取验证码',
				timer: null,//倒计时时间
				phoneNumPrefix: [
					{
						short: "CN",
						name: "中国",
						en: "China",
						tel: "+86",
						pinyin: "zg",
					}, {
						short: "BN",
						name: "文莱",
						en: "Brunei",
						tel: "+673",
						pinyin: "wl",
					}, {
						short: "KH",
						name: "柬埔寨",
						en: "Kampuchea(Cambodia)",
						tel: "+855",
						pinyin: "jpz",
					}, {
						short: "ID",
						name: "印度尼西亚",
						en: "Indonesia",
						tel: "+62",
						pinyin: "ydnxy",
					}, {
						short: "LA",
						name: "老挝",
						en: "Laos",
						tel: "+856",
						pinyin: "lw",
					}, {
						short: "MY",
						name: "马来西亚",
						en: "Malaysia",
						tel: "+60",
						pinyin: "mlxy",
					}, {
						short: "MM",
						name: "缅甸",
						en: "Burma",
						tel: "+95",
						pinyin: "md",
					}, {
						short: "PH",
						name: "菲律宾",
						en: "Philippines",
						tel: "+63",
						pinyin: "flb",
					}, {
						short: "SG",
						name: "新加坡",
						en: "Singapore",
						tel: "+65",
						pinyin: "xjp",
					}, {
						short: "TH",
						name: "泰国",
						en: "Thailand",
						tel: "+66",
						pinyin: "tg",
					}, {
						short: "VN",
						name: "越南",
						en: "Vietnam",
						tel: "+84",
						pinyin: "yn",
					},
				]
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			// 获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// #endif
			const _this = this
			// 获取设备信息
			plus.device.getInfo({
				success: function(e) {
					_this.uuid = e.uuid
				},
				fail: function(e) {
					console.log('getDeviceInfo failed: ' + JSON.stringify(e));
				}
			});
		},
		mounted() {
			// #ifdef APP-PLUS
			// 引用字体包
			let domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				fontFamily: 'medium',
				src: "url('https://www.chinabdc.cn:8092/H5/font/PingFangSC-Medium.ttf')"
			});
			// #endif
		},
		methods: {
			//第三方登录
			auth(type){
				const _this=this
				   let loginType = type
				        uni.login({
				          provider: loginType,
				          success(ress) {
				            // 登录成功后, 获取用户数据
				            uni.getUserInfo({
				              provider: loginType,
				              success(info) {
				                var userInfo = info.userInfo
				                var nickName = ""
				                var avatarUrl = ""
				                var openId = ""
				                var pf_type = ""
				                if (loginType == "weixin") {
				                  nickName = userInfo.nickName
				                  avatarUrl = userInfo.avatarUrl
				                  openId = userInfo.openId
								  pf_type=2
				                } else if (loginType == "qq") {
				                  nickName = userInfo.nickname
				                  avatarUrl = userInfo.figureurl_qq_2
				                  // qq返回了多个尺寸的头像, 按需选择
				                  openId = userInfo.openId
								  pf_type=1
				                }else if (loginType == "sinaweibo") {
				                  nickName = userInfo.nickname
				                  avatarUrl = userInfo.avatar_large
				                  openId = userInfo.id
								  pf_type=5
				                }
								let data = {
									deviceNo: _this.uuid,
									imgurl: avatarUrl,
									gender:1,
									mobile_type: 1,
									nickname: nickName,
									openid: openId,
									pf_type: pf_type
								};
								 _this.$myRequest({
									url: '/auth/third-party-login',
									method: 'post',
									header: {},
									data: data
								}).then(function(res) {
									console.log(res)
									if (res.code == 200) {
										_this.$refs.uToast.show({
											title: _this.$i18n.messages[_this.$i18n.locale].mypage.login.Loginok,
											type: 'success'
										})
										setToken(res.data)
										setTimeout(function() {
											uni.switchTab({
											   url: '/pages/mypage/mypage'
											});
										}, 1000);
									}else{
										_this.$refs.uToast.show({
											title: _this.$i18n.messages[_this.$i18n.locale].mypage.login.Loginfailed,
											type: 'error'
										})
									}
								})  
								.catch(function(error) {
									console.log(error);
								});
				              }
				            })
				          }
				        })
			},
			//选择手机号前缀
			confirm(e) {
				this.identifierPrefix = [e]
				this.show = false
			},
			//点击登录
			async login() {
				if(this.phoneNum==''){
					this.$refs.uToast.show({
						title: '请输入手机号/邮箱',
						type: 'error'
					})
					return
				} 
				if (this.isShow) {
					let data = {
						deviceNo: this.uuid,
						identifier: this.phoneNum,
						identifierPrefix: this.phoneNumPrefix[this.identifierPrefix].tel,
						phoneValidCode: this.yzm
					};
					const res = await this.$myRequest({
						url: '/auth/login',
						method: 'post',
						header: {},
						data: data
					})
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: this.$i18n.messages[this.$i18n.locale].mypage.login.Loginok,
							type: 'success'
						})
						setToken(res.data)
						setTimeout(function() {
							uni.switchTab({
							   url: '/pages/mypage/mypage'
							});
						}, 1000);
					}else{
						this.$refs.uToast.show({
							title: this.$i18n.messages[this.$i18n.locale].mypage.login.Loginfailed,
							type: 'error'
						})
					}
				}else{
					let data = {
						deviceNo: this.uuid,
						identifier: this.phoneNum,
						password: this.passwo
					};
					const res = await this.$myRequest({
						url: '/auth/login',
						method: 'post',
						header: {},
						data: data
					})
					if (res.code == 200) {
						
						this.$refs.uToast.show({
							title: this.$i18n.messages[this.$i18n.locale].mypage.login.Loginok,
							type: 'success'
						})
						setToken(res.data)
						setTimeout(function() {
							uni.switchTab({
							   url: '/pages/mypage/mypage'
							});
						}, 1000);
					}else{
						this.$refs.uToast.show({
							title: this.$i18n.messages[this.$i18n.locale].mypage.login.Loginfailed,
							type: 'error'
						})
					}
				}
			},
			// 登录方式切换
			loginChange() {
				console.log(this.isShow)
				// 置空处理
				this.phoneNum = '';
				this.yzm = '';
				this.phoneNum = '';
				this.passwo = '';
				this.$nextTick(function() {
					this.isShow = !this.isShow;
				});
			},
			// 手机登录获取验证码
			async getCode() {
				const _this = this
				let headers = {
					deviceNo: this.uuid,
					identifierPrefix: this.phoneNumPrefix[this.identifierPrefix].tel,
					phone: this.phoneNum
				}
				const res = await this.$myRequest({
					url: '/auth/get-phone-valid-code',
					method: 'post',
					header: {},
					data: headers
				})
				console.log(res)
				if (res.code == 200) {
					this.btnMsg = 's重发';
					this.disable = false;
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								clearInterval(this.timer);
								this.timer = null;
								this.disable = true;
								this.count = '重新获取';
								this.btnMsg = '';
							}
						}, 1000);
						this.$refs.uToast.show({
							title: '发送成功',
							type: 'success'
						})
					}
				}
			},
			// 消息弹框
			showToast(title, icon) {
				uni.showToast({
					title: String(title),
					icon: String(icon)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main{
		width: 750rpx;
	}
	.page {
		width: 750rpx;
		flex: 1;
	}

	.login-main {
		image {
			width: 100%;
			height: 500rpx;
		}
	}

	.login-content {
		margin: 0 20rpx;

		.describe {
			font-size: 40rpx;
			margin-top: 35rpx;
			color: #212121;
		}

		.account {
			width: 100%;
			margin-top: 24rpx;
			align-items: center;

			.section {
				position: relative;
				width: 664rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.btns {
					position: absolute;
					top: 20rpx;
					right: 0;
					line-height: 50rpx;
					font-size: 28rpx;
					color: #888888;
					border-width: 0rpx;
					background-color: rgba(0, 0, 0, 0);
				}

				.identClass {
					position: absolute;
					top: 20rpx;
					left: 80rpx;
					font-size: 35rpx;
					color: #ed4141;
					font-weight: 600;
				}

				.phone,
				.pwd {
					width: 520rpx;
					height: 130rpx;
					font-size: 30rpx;
					color: #181818;
				}
			}
		}

		.chang {
			margin-top: 30rpx;

			button {
				background-color: #ed4141;
				color: #fff;
			}

			.zcbth {
				margin-top: 20rpx;
				background-color: #e2e2e2;
				color: #000000;
			}
		}

		.box {
			margin: 40rpx auto;
			text-align: center;
			color: #9B9B9B;

			.line {
				margin: 0 20rpx;
			}
		}

		.menu {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.email {
				background-color: #6473d0;
				border-radius: 50px;
				padding: 15rpx;
			}
		}
	}
</style>
